Render HTML directly into a component in Svelte 3

• We have a simple <textarea> component, and whatever we have typed into it we would like to render in the div below it.
• To do that we're going to bind the value of the textarea to the stringToRender variable like so <textarea bind:value={stringToRender}/>
• What if we wanted to paste in some HTML and have it render inside of the div? To do that we'll add the @html syntax in front of the variable like so:

<div>
    {@html stringToRender}
</div>

• Note that Svelte doesn't sanitize any string that you decide to use so make sure not to expose your users to an attack.

Use Svelte 3 to gracefully show and hide DOM elements

• Svelte has built in transitions that you can import from "svelte/transition"
• The svelte/transition module exports seven functions: fade, blur, fly, slide, scale, draw, and crossfade. Source
• You can add a transition to an element by adding the following attribute transition:slide
• Transitions take parameters which effect the transition. You can pass those by passing an object in to the transition that has different parameters like delay and duration

  Previous      Next